import { Button, Table } from "antd"
import {useState,useEffect} from 'react'
import './Task.scss'
function Task(props) {
    let [tableList,setTableList] = useState([]),
        [tableLoading,setTableLoading] = useState(false);
    const dataSource = [
        {
            id: '1',
            describe: '胡彦斌',
            state: 32,
            endtime: 32,
            option: {

            },

        },
        {
            id: '2',
            describe: '胡彦斌',
            state: 32,
            endtime: 32,
            option: 32,

        },
    ];
    useEffect(()=>{
        setTableList(dataSource)
        setTableLoading(false)
    },[])
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
        },
        {
            title: '任务描述',
            dataIndex: 'describe',
        },
        {
            title: '状态',
            dataIndex: 'state',
        },
        {
            title: '完成时间',
            dataIndex: 'endtime',
        },
        {
            title: '操作',
            dataIndex: 'option',
        },
    ];

    return <div className="task-main">
        <header>
            <h1>TASK OA 任务管理系统</h1>
            <Button type="primary">新增任务</Button>
        </header>
        <hr style={{ opacity: .3 }} />
        <main>
            {/* 标签 */}
            <div>
                <Button className="btn-right" type="primary">全部</Button>
                <Button className="btn-right">未完成</Button>
                <Button className="btn-right">已完成</Button>
            </div>
            {/* 表格 */}
            <Table dataSource={tableList} rowKey="id" loading={tableLoading} columns={columns} pagination={false}
            >
            </Table>
        </main>

    </div>
}
export default Task